<script setup lang="ts">
import * as Antd from 'ant-design-vue';
import { message } from 'ant-design-vue';
const [messageApi, contextHolder] = message.useMessage();
import { ref } from 'vue';
const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};

const handleOk = (e: MouseEvent) => {
  console.log(e);
  open.value = false;
};
const info = () => {
  messageApi.error('Hello, Ant Design Vue!');
};


</script>

<template>
  <div>
    <h1>Antd</h1>
    <Antd.Button type="primary" >Button</Antd.Button>
  <context-holder />
  <a-button type="primary" @click="info">Display normal message</a-button>




<a-button type="primary" @click="showModal">Open Modal</a-button>
  <a-modal v-model:open="open" title="Basic Modal" @ok="handleOk">
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>

    
  </div>
</template>

<style scoped>

</style>
